<template>
	<div class="left">
		<person-icon></person-icon>
		<NavLeft></NavLeft>
	</div>
</template>

<script>
    import PersonIcon from "./PersonIcon";
		import NavLeft from "./NavLeft";
		export default {
			name: "LeftMain",
			components: {NavLeft, PersonIcon}
		}
</script>

<style scoped>
	@media screen and (max-width: 992px) {
		.left {
			width: 94%;
			order: 1;
			margin-bottom: .1rem;
		}
	}
	@media screen and (min-width: 993px) {
		.left {
			position: sticky;
			top: .5rem;
			width: 12%;
			align-self:flex-start;
		}
	}
	.main .left {
		background-color: #FFFFFF;
		border-radius: .1rem;
		overflow: hidden;
	}
</style>
